<script setup lang="ts">
  import { tableHeaderCellStyle } from '@/utils/tools'
  import { CaretBottom, CaretRight } from '@element-plus/icons-vue'
  import { ref } from 'vue'
  import { getOrderDetailFeeProjectList } from '@/api/order'
  import CostDetail from '@/views/order/ocost/components/CostDetail.vue'
  import ApplyOrCheckFeeModal from '@/components/pages/order/detail/ServiceFee/ApplyOrCheckFeeModal/index.vue'
  import { Cost } from './types'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import HStatus from '@/components/common/status/HStatus.vue'
  import HLink from '@/components/common/link/HLink.vue'

  const props = defineProps({
    showAddServiceFeeWidthSpare: {
      type: Boolean,
      required: true,
    },
    orderId: {
      type: String,
      required: true,
    },
    orderNo: {
      type: String,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'updated'): void
  }>()

  // 表格数据
  const tableData = ref<Array<Cost>>([])

  // 列表总条数
  const total = ref(0)

  // 分页配置
  const pagination = ref({
    limit: 4,
    page: 1,
  })

  // 获取费用项目列表
  const getOrderFees = async () => {
    const res = await getOrderDetailFeeProjectList(pagination.value, props.orderId)
    tableData.value = res.data.data.rows
    total.value = Number(res.data.data.total)
    if (total.value >= 1) {
      activeNames.value.push('cost_list')
    }
  }

  // 费用id
  const costId = ref('')

  // 费用单号
  const costNo = ref('')

  // 费用审核
  const handleCostCheck = (cost: Cost) => {
    costId.value = cost.id
    costNo.value = cost.feeNo
  }

  // 费用详情弹窗状态
  const costDetailModalVisible = ref(false)

  // 查看费用详细
  const handleViewCostDetail = (n: string) => {
    costDetailModalVisible.value = true
    costId.value = n
  }

  // 打开的面板
  const activeNames = ref([''])

  /**
   * 更新事件
   */
  const onUpdated = () => {
    emits('updated')
    getOrderFees()
  }

  defineExpose({
    getOrderFees,
  })
</script>

<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item name="cost_list">
        <template #title>
          <div
            style="
              box-sizing: border-box;
              padding: 0 16px;
              display: flex;
              gap: 5px;
              align-items: center;
            "
          >
            <el-icon>
              <template v-if="activeNames.includes('cost_list')">
                <CaretBottom />
              </template>
              <template v-else>
                <CaretRight />
              </template>
            </el-icon>
            <span>服务费用</span>

            <!--@click.stop=""是为了解决点击申请费用按钮会展开面板-->
            <ApplyOrCheckFeeModal @click.stop="" :workId="props.orderId" @update-list="onUpdated">
              <HPlainButton :padding-lr="6" :height="22" v-if="showAddServiceFeeWidthSpare"
                >申请服务费用</HPlainButton
              >
            </ApplyOrCheckFeeModal>
          </div>
        </template>
        <div style="box-sizing: border-box; padding: 0 16px">
          <el-table
            border
            resizable
            :data="tableData"
            stripe
            style="width: 100%"
            row-key="id"
            :header-cell-style="tableHeaderCellStyle"
          >
            <template #empty>
              <el-empty description="暂无数据" :image-size="120" />
            </template>
            <!-- 序号 -->
            <el-table-column show-overflow-tooltip label="序号" fixed="left" min-width="50">
              <template v-slot="i">
                {{ i.$index + 1 }}
              </template>
            </el-table-column>

            <!-- 操作 -->
            <el-table-column label="操作" width="100" fixed="left">
              <template v-slot="item">
                <div class="ord_dis">
                  <template v-if="item.row.status == 1">
                    <ApplyOrCheckFeeModal
                      :feeNo="costNo"
                      :workNo="orderNo"
                      :feeId="costId"
                      @update-list="onUpdated"
                    >
                      <HLink type="warning" @click="handleCostCheck(item.row)">审核</HLink>
                    </ApplyOrCheckFeeModal>
                  </template>
                  <HLink disabled v-else>审核</HLink>
                </div>
              </template>
            </el-table-column>

            <!-- 费用单号 -->
            <el-table-column
              show-overflow-tooltip
              fixed="left"
              prop="feeNo"
              label="费用单号"
              min-width="160"
            >
              <template #default="scope">
                <HLink @click="handleViewCostDetail(scope.row.id)">
                  {{ scope.row.feeNo }}
                </HLink>
              </template>
            </el-table-column>

            <!-- 状态 -->
            <el-table-column prop="state" label="状态" width="83">
              <template #default="scope">
                <HStatus type="warning" v-if="scope.row.status == 1">待审核</HStatus>
                <HStatus type="success" v-if="scope.row.status == 2">已通过</HStatus>
                <HStatus type="error" v-if="scope.row.status == 3">已驳回</HStatus>
                <HStatus type="info" v-if="scope.row.status == 4">已撒回</HStatus>
                <HStatus type="info" v-if="scope.row.status == 5">已取消</HStatus>
              </template>
            </el-table-column>

            <!-- 结算类型 -->
            <el-table-column
              show-overflow-tooltip
              prop="settlementType"
              label="结算类型"
              width="100"
            />

            <!-- 项目费用名称 -->
            <el-table-column
              show-overflow-tooltip
              prop="feeProject"
              label="项目费用名称"
              width="100"
            />

            <!-- 支付服务商总费用 -->
            <el-table-column
              show-overflow-tooltip
              prop="payNetworkTotalPrice"
              label="支付服务商总费用"
              width="150"
            >
              <template #default="scope">
                ￥{{ (scope.row.payNetworkTotalPrice || 0).toFixed(2) }}
              </template>
            </el-table-column>

            <!-- 向商家收取总费用 -->
            <el-table-column
              show-overflow-tooltip
              prop="receiveFactoryTotalPrice"
              label="向商家收取总费用"
              width="150"
            >
              <template #default="scope">
                ￥{{ (scope.row.receiveFactoryTotalPrice || 0).toFixed(2) }}
              </template>
            </el-table-column>

            <!-- 平台承担总费用 -->
            <el-table-column
              show-overflow-tooltip
              prop="totalPrice"
              label="平台承担总费用"
              width="150"
            >
              <template #default="scope"> ￥{{ (scope.row.totalPrice || 0).toFixed(2) }} </template>
            </el-table-column>

            <!-- 申请人员 -->
            <el-table-column show-overflow-tooltip prop="applyEmp" label="申请人员" width="120" />

            <!-- 申请时间 -->
            <el-table-column show-overflow-tooltip prop="createTime" label="申请时间" width="150" />

            <!-- 审核时间 -->
            <el-table-column show-overflow-tooltip prop="reviewTime" label="	审核时间" width="150" />
          </el-table>
          <div style="margin-top: 12px; display: flex; justify-content: flex-end">
            <el-pagination
              layout="total, prev, pager, next, jumper"
              :total="total"
              background
              :page-size="4"
              v-model:current-page="pagination.page"
              @current-change="getOrderFees"
            />
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

    <!-- 查看详细弹出框 -->
    <CostDetail
      :feeId="costId"
      :checkDialog="costDetailModalVisible"
      @assign-dialog="costDetailModalVisible = false"
    />
  </div>
</template>

<style lang="scss">
  .check_btn {
    color: #e69103;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
</style>
